<template>
	<view class="flex-col w-max h-max" style="background: #fff;" :style="[wrapStyle]">
		<view class="flex1 w-max flex" v-for="(item,index) in list" :key="index">
			<view class="flex1 h-max" :class="{'bg-000':res}" v-for="(res,res2) in item" :key="res2"/>
		</view>
		<canvas class="w-max h-max" style="z-index: -1;position: fixed;" :id="options.canvasId"
			:canvas-id="options.canvasId" />
	</view>
</template>

<script>
	// <h-qrcode :text="text" size="200" ></h-qrcode>
	// <u-button type="warning" @click="$refs.qr.save()">保存到本地</u-button>
	/**
	 * img-list 二维码
	 * @description 此组件一般用生成二维码。
	 * @tutorial 张浩
	 * @property {String} text 生成二维码的内容 必填
	 * @property {String} size 图片大小 单位rpx 默认200
	 * @property {function} $refs.qrcode.save() 获取ids
	 * @example <h-qrcode ref="qrcode" :text="text" size="200" ></h-qrcode>
	 */
	import uqrcode from './uqrcode'
	export default {
		name: "h-qrcode",
		props: {
			size: {
				default: '200'
			},
			text: {
				type: String,
				default: '',
				required: true,
				// validator: function(value) {
				// 	return typeof(value) === 'string'
				// }
			},
			canvasId: {
				default: ''
			},
			onImg: {
				default: false,
			},
		},
		data() {
			return {
				options: {
					canvasId: this.default || 'canvas',
					text: this.text,
					size: this.size / (750 / uni.getSystemInfoSync().screenWidth),
				},
				codeImg: ''
			};
		},
		computed: {
			wrapStyle() {
				let data = {};
				if (Number(this.size)) {
					data.width = this.size + 'rpx'
					data.height = this.size + 'rpx'
				} else {
					data.width = this.size
					data.height = this.size
				}
				return data;
			},
			list() {
				if (this.onImg) {
					this.$nextTick(this.make)
				}
				let list = uqrcode.getModules({
					text: this.text
				})
				console.log(74,list)
				return list
			}
		},
		created() {
			this.$on('getImg', img => {
				console.log(img);
			})
		},
		mounted() {},
		methods: {
			make() {
				uqrcode.make(this.options, this).then(res => {
					this.codeImg = res.tempFilePath
					this.$emit('getImg', res.tempFilePath)

				}).catch(err => {
					console.log(err);
				})
			},
			save() {
				if (this.codeImg) {
					this.saveImg(this.codeImg)
				} else {
					uni.showLoading()
					this.$on('getImg', img => {
						this.saveImg(img)
					})
					this.make()
				}
			},
			saveImg(img) {
				// #ifdef H5
				let that = this
				uni.previewImage({
					urls: [img],
					success: function(res) {
						that.$nextTick(() => {
							uni.showToast({
								icon: "none",
								title: "长按保存"
							})
						}, 1000)
						console.log(res);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
				return
				// #endif
				uni.saveImageToPhotosAlbum({
					filePath: img,
					success: function() {
						uni.showToast({
							icon: "none",
							title: "成功保存到系统相册"
						})
						console.log('save success');
					}
				});
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	.flex-col {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.flex {
		display: flex;
	}

	.flex1 {
		flex: 1;
	}

	.w-max {
		width: 100%;
	}

	.h-max {
		height: 100%;
	}
	.bg-000{
		background: #000;
	}
</style>
